<template>
    <template v-if="!status.loading">
        <!-- module start -->
        <div class="api-modules-tab ta-c" v-if="project.editable=='YES'">
            <a class="api-module api-module-item" v-bind:class="{'active':editing}" v-on:click="editing=true">编辑模式</a>
            <a class="api-module api-module-item" v-bind:class="{'active':!editing}" v-on:click="editing=false">浏览模式</a>
        </div>
        <div class="api-modules">
            <div class="cb api-modules-container">
                <ul>
                    <li data-id="{{item.id}}" v-for="item in modules"
                        class="api-module fl api-module-item"
                        v-bind:class="{'active':currentModule.id == item.id}">
                        <span v-on:click="moduleClick(item)">{{item.name}}</span>
                        <i class="icon-angeldownblock iconfont" v-on:click.stop="flag.moduleActionId= item.id" v-show="editing"></i>
                        <div class="api-item-actions" v-show="flag.moduleActionId == item.id && editing">
                            <div v-on:click="moduleEdit(item)"><i class="iconfont icon-bianji"></i> 编辑</div>
                            <div v-on:click="moduleDelete(item)"><i class="iconfont icon-move"></i> 删除</div>
                        </div>
                       <!-- <i class="icon-bianji iconfont" v-on:click="moduleEdit(item)" v-show="editing"></i>
                        <i class="icon-close iconfont" v-on:click="moduleDelete(item)" v-show="editing"></i>-->
                    </li>
                    <li class="api-module fl api-module-plus" v-on:click="moduleNew" v-show="editing">
                        <i class="icon-tianjia iconfont"></i></li>
                    <li class="fr api-module"><i class="iconfont icon-chick" style="cursor: default"></i></li>
                    <li class="fr api-module"><i class="iconfont icon-menu"></i></li>
                    <li class="fr api-module api-env" v-show="currentEnv" v-on:click.stop="envClick($event)">{{currentEnv.name}} <i class="iconfont icon-angeldownblock"></i></li>
                    <li class="fr api-module">
                        <div class="api-module-search">
                            <input type="text" class="text" v-on:keyup.enter="search" v-model="flag.searchInput">
                            <i class="iconfont icon-search" v-on:click="search"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="api-env-details" id="api-env-details" v-show="status.showEnvs" v-on:mouseleave="status.showEnvs=false">
            <ul class="api-env-items">
                <li v-for="item in envs" v-bind:class="{'active':item.t==currentEnv.t}" v-on:click="currentEnv=item" v-on:mouseover="envOver(item,$event)">{{item.name}}</li>
                <li class="line"></li>
                <li v-on:click="createEnv" v-on:mouseover="status.showEnvValues=false" v-if="project.editable=='YES'" class="api-env-create">添加环境</li>
            </ul>
            <div class="api-env-content" id="api-env-content" v-show="status.showEnvValues">
                <div class="div-table">
                    <ul class="div-table-header div-table-line cb">
                        <li class="col-sm-4">变量</li>
                        <li class="col-sm-8">
                            <div class="cb">值
                                <i v-on:click.stop="envRemove" style="padding-right: 5px" class="fr iconfont icon-close"></i>
                                <i v-on:click.stop="envCopy" style="padding-right: 5px" class="fr iconfont icon-copy"></i>
                                <i v-on:click.stop="envEdit" style="padding-right: 5px" class="fr iconfont icon-edit"></i>
                            </div>
                        </li>
                    </ul>
                    <ul class="div-table-line cb" v-for="item in flag.tempEnv.vars">
                        <li class="col-sm-4">{{item.name}}</li>
                        <li class="col-sm-8">{{item.value}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="api-menus" id="api-menus">
            <div class="api-sanjiaoxings">
                <!--<div class="api-sanxiaoxing"></div>-->
                <i class="iconfont icon-sanjiaoxing"></i>
            </div>
            <ul class="cb">
                <li v-if="editable">
                    <a v-on:click="getShares">
                        <p><i class="iconfont icon-relation"></i></p>
                        <p>分享</p>
                    </a>
                </li>
                <li v-if="editable">
                    <a v-link="'/project/'+id+'/members'">
                        <p><i class="iconfont icon-user"></i></p>
                        <p>成员管理</p>
                    </a>
                </li>
                <li v-if="editable">
                    <a v-link="'/project/'+id+'/settings'">
                        <p><i class="iconfont icon-setting"></i></p>
                        <p>项目设置</p>
                    </a>
                </li>
                <li>
                    <a v-link="'/project/'+id+'/quit'" >
                        <p><i class="iconfont icon-quit"></i></p>
                        <p>退出项目</p>
                    </a>
                </li>
                <li v-if="editable">
                    <a v-link="'/project/'+id+'/transfer'">
                        <p><i class="iconfont icon-transfer"></i></p>
                        <p>项目转让</p>
                    </a>
                </li>
                <li v-if="editable">
                    <a v-link="'/project/'+id+'/release'">
                        <p><i class="iconfont icon-delete"></i></p>
                        <p>删除项目</p>
                    </a>
                </li>
                <li>
                    <a href="http://www.xiaoyaoji.com.cn/help.html" target="_blank">
                        <p><i class="iconfont icon-question"></i></p>
                        <p>帮助</p>
                    </a>
                </li>

            </ul>
        </div>
        <datalist id="headerlist">
            <option v-for="item in flag.headers" value="{{item}}">
        </datalist>
        <datalist id="requestlist">
            <option v-for="item in flag.requests" value="{{item}}">
        </datalist>
        <datalist id="responselist">
            <option v-for="item in flag.responses" value="{{item}}">
        </datalist>
        <!-- module end -->

        <div v-show="modules.length>0">
        <!-- editing start -->
        <div v-show="editing">
            <div id="api-edit-box" class="apis">
                <div class="cb api-container">
                    <!-- api left start -->
                    <div class="fl apis-left">
                        <div class="cb api-fn-actions">
                            <div class="fl" v-on:click="folderNew"><i class="icon-tianjia iconfont"></i> 添加分类</div>
                            <div class="fl" v-on:click="folderNewApi(null,$event)"><i class="icon-tianjia iconfont"></i> 添加接口</div>
                        </div>
                        <ul class="apis-nav" id="api-edit-nav">
                            <li>
                                <div class="api-name api-description cb" v-bind:class="{'active':show=='doc'}"
                                     v-on:click="show='doc'">
                                    <span>文档说明</span>
                                    <span class="fr api-actions">
                                        <i class="iconfont icon-list" v-on:click.stop="collapse=!collapse"></i>
                                    </span>
                                </div>
                            </li>
                            <li>
                                <div class="api-name api-description cb" v-bind:class="{'active':show=='module'}"
                                     v-on:click="show='module'">
                                    <span>模块全局参数</span>
                                </div>
                            </li>

                            <template v-if="!currentModule.folders">
                                {{currentModule.folders = []}}
                            </template>
                            <li v-for="item in currentModule.folders">
                                <div class="api-name api-folder cb" v-bind:class="{'open':!collapse}" v-on:click="folderClick">
                                    <span>{{item.name}}</span>
                                    <div class="fr">
                                        <i v-on:click="folderNewApi(item,$event)" class="icon-tianjia iconfont api-new"></i>
                                        <i v-on:click.stop="flag.actionId=item.id" class="icon-angeldownblock iconfont"></i>
                                    </div>
                                </div>
                                <ul class="apis-nav apis-nav-sub" v-bind:class="{'hide':collapse}">
                                    <li v-for="api in item.children">
                                        <div class="api-name cb" v-on:click="apiClick(api,item)"
                                             v-bind:class="{'active':currentApi.id == api.id}">
                                            <span v-bind:class="{'deprecated':api.status=='DEPRECATED'}">{{api.name}}</span>
                                            <div class="fr">
                                                <i v-on:click.stop="flag.actionId=api.id" class="icon-angeldownblock iconfont"></i>
                                            </div>
                                        </div>
                                        <div class="api-item-actions" v-show="flag.actionId==api.id">
                                            <div v-on:click="listItemCopy('api',api.id,'copy')"><i class="iconfont icon-copy"></i> 复制</div>
                                            <div v-on:click="listItemCopy('api',api.id,'move')"><i class="iconfont icon-move"></i> 移动</div>
                                            <div v-on:click="apiDelete(api,item.children,$event)"><i class="iconfont icon-move"></i> 删除</div>
                                        </div>
                                    </li>
                                </ul>
                                <div class="api-item-actions" v-show="flag.actionId==item.id">
                                    <div v-on:click="listItemCopy('folder',item.id,'copy')"><i class="iconfont icon-copy"></i> 复制</div>
                                    <div v-on:click="listItemCopy('folder',item.id,'move')"><i class="iconfont icon-move"></i> 移动</div>
                                    <div v-on:click="folderEdit(item,$event)" ><i class="iconfont icon-bianji"></i> 编辑</div>
                                    <div v-on:click="folderDelete(item,$event)"><i class="iconfont icon-move"></i> 删除</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- api left end -->
                    <!-- api content start -->
                    <div class="api-content fl">
                        <div id="api-edit-description" class="api-doc-desc" v-bind:class="{'hide':show!='doc'}">
                            <div id="editorBox"></div>
                            <div class="api-btn-save ta-c">
                                <button class="btn btn-orange" v-on:click="updateProject">保存修改</button>
                            </div>
                        </div>
                        <div v-bind:class="{'hide':show!='module'}" class="form">
                            <p class="api-details-title">全局请求头</p>
                            <div class="div-table editing">
                                <ul class="div-table-header div-table-line cb">
                                    <li class="col-sm-1">操作</li>
                                    <li class="col-sm-3">参数名称</li>
                                    <li class="col-sm-2">是否必须</li>
                                    <li class="col-sm-4">描述</li>
                                    <li class="col-sm-2">默认值</li>
                                </ul>
                                <request-headers-vue
                                        v-bind:request-headers.sync="currentModule.requestHeaders"
                                        v-bind:editing="editing"></request-headers-vue>
                            </div>
                            <div class="item">
                                <button class="btn btn-default btn-sm" v-on:click="currentModule.requestHeaders.push({children:[],require:'true'})">
                                    <i class="iconfont icon-tianjia"></i>添加参数
                                </button>
                                <button class="btn btn-default btn-sm" v-on:click="import2GHeaders">
                                    <i class="iconfont icon-importexport"></i>导入json
                                </button>
                            </div>

                            <p class="api-details-title">全局请求头</p>
                            <div class="div-table editing">
                                <ul class="div-table-header div-table-line cb">
                                    <li class="col-sm-1">操作</li>
                                    <li class="col-sm-3">参数名称</li>
                                    <li class="col-sm-2">是否必须</li>
                                    <li class="col-sm-2">类型</li>
                                    <li class="col-sm-2">描述</li>
                                    <li class="col-sm-2">默认值</li>
                                </ul>
                                <request-args-vue v-bind:request-args="currentModule.requestArgs"
                                                  v-bind:editing="editing"></request-args-vue>
                            </div>
                            <div class="item">
                                <button class="btn btn-default btn-sm" v-on:click="currentModule.requestArgs.push({type:'string',children:[],require:'true'})">
                                    <i class="iconfont icon-tianjia"></i>添加参数
                                </button>
                                <button class="btn btn-default btn-sm" v-on:click="import2GRequestArgs">
                                    <i class="iconfont icon-importexport"></i>导入json
                                </button>
                            </div>

                            <div class="api-btn-save ta-c">
                                <button class="btn btn-orange" v-on:click="moduleUpdateCommonParams">保存修改</button>
                            </div>
                        </div>
                        <div id="api-edit-details" v-bind:class="{'hide':show!='api'}">
                            <div id="api-edit-content" class="form">
                                <p class="api-details-title">基本信息</p>
                                <div class="item api-chose-list">
                                    <div>
                                        <span>分类</span>
                                        <div class="div-select">
                                            <select v-model="currentApi.folderId">
                                                <option value="{{item.id}}" v-for="item in currentModule.folders">{{item.name}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <span>协议</span>
                                        <div class="div-select">
                                            <select v-model="currentApi.protocol">
                                                <option value="HTTP">HTTP</option>
                                                <option value="WEBSOCKET">WEBSOCKET</option>
                                            </select>
                                        </div>
                                    </div>
                                    <template v-if="currentApi.protocol=='HTTP'">
                                       <div>
                                           <span>请求方法</span>
                                           <div class="div-select">
                                               <select v-model="currentApi.requestMethod">
                                                    <option value="GET">GET</option>
                                                    <option value="POST">POST</option>
                                                    <option value="PUT">PUT</option>
                                                    <option value="DELETE">DELETE</option>
                                                    <option value="PATCH">PATCH</option>
                                                    <option value="COPY">COPY</option>
                                                    <option value="OPTIONS">OPTIONS</option>
                                                </select>
                                           </div>
                                       </div>
                                        <div>
                                            <span>请求数据类型</span>
                                            <div class="div-select">
                                                <select v-model="currentApi.dataType">
                                                    <option value="X-WWW-FORM-URLENCODED">X-WWW-FORM-URLENCODED</option>
                                                    <template v-if="currentApi.requestMethod == 'POST'">
                                                        <option value="FORM-DATA">FORM-DATA</option>
                                                        <option value="JSON">JSON</option>
                                                        <option value="RAW">RAW</option>
                                                        <option value="BINARY">BINARY</option>
                                                        <option value="XML">XML</option>
                                                    </template>
                                                </select>
                                            </div>
                                        </div>
                                        <div>
                                            <span>响应类型</span>
                                            <div class="div-select">
                                                <select v-model="currentApi.contentType">
                                                    <option value="JSON">JSON</option>
                                                    <option value="JSONP">JSONP</option>
                                                    <option value="TEXT">TEXT</option>
                                                    <option value="XML">XML</option>
                                                    <option value="HTML">HTML</option>
                                                    <option value="IMAGE">IMAGE</option>
                                                    <option value="BINARY">BINARY</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div>
                                            <span>状态</span>
                                            <div class="div-select">
                                                <select v-model="currentApi.status">
                                                    <option value="ENABLE">启用</option>
                                                    <option value="DEPRECATED">已废弃</option>
                                                </select>
                                            </div>
                                        </div>

                                    </template>
                                </div>
                                <div class="item">
                                    <div class="col-sm-1 label">接口名称</div>
                                    <div class="col-sm-11">
                                        <input type="text" class="text" maxlength="30" placeholder="请输入接口名称"
                                               v-model="currentApi.name" value="{{currentApi.name}}">
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-sm-1 label">请求地址</div>
                                    <div class="col-sm-11">
                                        <input type="text" placeholder="如:/api/test" v-model="currentApi.url" class="text"
                                               value="{{currentApi.url}}">
                                        <template v-if="currentEnv.vars && currentEnv.vars.length>0">
                                            <p class="hint">实际请求地址:{{requestURL}}</p>
                                            <p class="api-env-vars">
                                                变量：<span v-on:click="apiVarsClick(item.name,$event)" v-for="item in currentEnv.vars">{{item.name}}</span>
                                            </p>
                                        </template>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="col-sm-1 label">接口描述</div>
                                    <div class="col-sm-11">
                                    <textarea class="text"
                                              v-model="currentApi.description">{{currentApi.description}}</textarea>
                                    </div>
                                </div>
                                <template v-if="currentApi.protocol == 'HTTP'">
                                    <p class="api-details-title">发送数据</p>
                                <div class="tabs">
                                    <a class="tab" v-on:click="flag.tab='header'" v-bind:class="{'active':(flag.tab=='header') ||  (currentApi.dataType=='BINARY')}">请求头(Header)</a>
                                    <a class="tab" v-on:click="flag.tab='body'" v-bind:class="{'active':flag.tab=='body'}"  v-if="currentApi.dataType!='BINARY'">请求参数(Body)</a>
                                </div>
                                <!-- 请求头参数 -->
                                <div class="tab-content" v-bind:class="{'active':(flag.tab=='header') ||  (currentApi.dataType=='BINARY') }">
                                    <div class="div-table editing">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-1">操作</li>
                                            <li class="col-sm-3">参数名称</li>
                                            <li class="col-sm-2">是否必须</li>
                                            <li class="col-sm-4">描述</li>
                                            <li class="col-sm-2">默认值</li>
                                        </ul>
                                        <request-headers-vue
                                                v-bind:request-headers.sync="currentApi.requestHeaders"
                                                v-bind:editing="editing"></request-headers-vue>
                                    </div>
                                    <div class="item">
                                        <button class="btn btn-default btn-sm" v-on:click="insertNewRequestHeadersRow">
                                            <i class="iconfont icon-tianjia"></i>添加参数
                                        </button>
                                        <button class="btn btn-default btn-sm" v-on:click="import2RequestHeaders">
                                            <i class="iconfont icon-importexport"></i>导入json
                                        </button>
                                    </div>
                                </div>



                                <!-- 请求参数 -->
                                <div class="tab-content" v-bind:class="{'active':flag.tab=='body'}" v-if="currentApi.dataType!='BINARY'">
                                    <div class="div-table editing">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-1">操作</li>
                                            <li class="col-sm-3">参数名称</li>
                                            <li class="col-sm-2">是否必须</li>
                                            <li class="col-sm-2">类型</li>
                                            <li class="col-sm-2">描述</li>
                                            <li class="col-sm-2">默认值</li>
                                        </ul>
                                        <request-args-vue v-bind:request-args="currentApi.requestArgs"
                                                          v-bind:editing="editing"></request-args-vue>
                                    </div>
                                    <div class="item">
                                        <button class="btn btn-default btn-sm" v-on:click="insertNewRequestArgsRow">
                                            <i class="iconfont icon-tianjia"></i>添加参数
                                        </button>
                                        <button class="btn btn-default btn-sm" v-on:click="import2RequestArgs">
                                            <i class="iconfont icon-importexport"></i>导入json
                                        </button>
                                    </div>
                                </div>

                                <!-- 响应参数 -->
                                <p class="api-details-title">响应数据</p>
                                <div>
                                    <div class="div-table editing">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-1">操作</li>
                                            <li class="col-sm-3">参数名称</li>
                                            <li class="col-sm-2">是否必须</li>
                                            <li class="col-sm-2">类型</li>
                                            <li class="col-sm-4">描述</li>
                                        </ul>
                                        <response-args-vue v-bind:response-args="currentApi.responseArgs"
                                                           v-bind:editing="editing"></response-args-vue>
                                    </div>
                                    <div class="item">
                                        <button class="btn btn-default btn-sm" v-on:click="insertNewResponseArgsRow">
                                            <i class="iconfont icon-tianjia"></i>添加参数
                                        </button>
                                        <button class="btn btn-default btn-sm" v-on:click="import2ResponseArgs">
                                            <i class="iconfont icon-importexport"></i>导入json
                                        </button>
                                    </div>
                                </div>

                                <p class="api-details-title">示例数据</p>
                                <textarea class="api-example api-field" v-model="currentApi.example"
                                      placeholder="请添加一些示例数据">{{currentApi.example}}</textarea>
                                </template>
                            </div>
                            <div class="api-btn-save ta-c">
                                <button class="btn btn-orange" v-on:click="apiSave">保存修改</button>
                            </div>
                        </div>
                    </div>
                    <!-- api content end -->
                </div>
            </div>


        </div>
        <!-- editing end -->

        <!-- view start -->
        <div v-show="!editing">
            <template v-if="!error.projectNotExists">
                <div class="apis">
                    <div v-if="currentModule.folders && currentModule.folders.length>0" class="cb api-container">
                        <div class="fl apis-left">
                            <ul class="apis-nav api-folder-list">
                                <li>
                                    <div class="api-name api-description" v-bind:class="{'active':show=='doc'}"
                                         v-on:click="show='doc'">
                                        <span>文档说明</span>
                                        <span class="fr api-actions">
                                        <i class="iconfont icon-list" v-on:click.stop="collapse=!collapse"></i>
                                    </span>
                                    </div>
                                </li>
                                <template v-if="!currentModule.folders">
                                    {{currentModule.folders = []}}
                                </template>
                                <li v-for="item in currentModule.folders" class="cb">
                                    <!--<span class="fr handle">::</span>-->
                                    <div class="api-name api-folder" v-bind:class="{'open':!collapse}" v-on:click="folderClick">
                                        <span>{{item.name}}</span>
                                    </div>
                                    <ul class="apis-nav apis-nav-sub" v-bind:class="{'hide':collapse}">
                                        <li v-for="api in item.children" v-on:click="show='api'">
                                            <div class="api-name" v-bind:class="{'active':currentApi.id == api.id}"
                                                 v-on:click="apiClick(api,item)">
                                                <span v-bind:class="{'deprecated':api.status=='DEPRECATED'}">{{api.name}}</span>
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                        <div class="api-content fl">
                            <span class="api-update-time">更新时间: <span id="api-update-time">{{currentModule.lastUpdateTime}}</span></span>
                            <div id="api-doc-desc" class="api-doc-desc" v-show="show=='doc'">
                                <div id="view-box" v-show="project.details"></div>
                                <div v-show="!project.details" class="ta-c api-error-tip">
                                    <i class="iconfont icon-info"></i>
                                    <p>项目还未书写文档说明。</p>
                                </div>
                            </div>
                            <div id="api-details" class="api-details" v-show="show=='api'">
                                <p class="api-details-title">基本信息</p>
                                <div class="api-base-info api-edit-box">
                                    <p v-if="currentApi.protocol">请求类型: {{currentApi.protocol}}</p>
                                    <p v-if="currentApi.url">接口地址: {{requestURL}}</p>
                                    <template v-if="currentApi.protocol=='HTTP'">
                                        <p v-if="currentApi.requestMethod">请求方式: {{currentApi.requestMethod}}</p>
                                        <p v-if="currentApi.dataType">数据类型: {{currentApi.dataType}}</p>
                                        <p v-if="currentApi.contentType">响应类型: {{currentApi.contentType}}</p>
                                    </template>
                                    <p v-if="currentApi.status">接口状态: {{currentApi.status=='DEPRECATED'?'已废弃':'启用'}}</p>
                                </div>
                                <template v-if="currentApi.description">
                                    <p class="api-details-title">接口描述</p>
                                    <pre>{{currentApi.description}}</pre>
                                </template>
                                <template v-if="(currentModule.requestHeaders&&currentModule.requestHeaders.length>0)">
                                    <p class="api-details-title">全局请求头</p>
                                    <div class="div-table">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-2">参数名称</li>
                                            <li class="col-sm-1">是否必须</li>
                                            <li class="col-sm-7">描述</li>
                                            <li class="col-sm-2">默认值</li>
                                        </ul>
                                        <request-headers-vue
                                                v-bind:request-headers.sync="currentModule.requestHeaders"
                                                v-bind:editing="editing"></request-headers-vue>
                                    </div>
                                </template>

                                <template v-if="(currentApi.requestHeaders  && currentApi.requestHeaders.length>0)">
                                    <p class="api-details-title">请求头</p>
                                    <div class="div-table">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-2">参数名称</li>
                                            <li class="col-sm-1">是否必须</li>
                                            <li class="col-sm-7">描述</li>
                                            <li class="col-sm-2">默认值</li>
                                        </ul>
                                        <request-headers-vue
                                                v-bind:request-headers.sync="currentApi.requestHeaders"
                                                v-bind:editing="editing"></request-headers-vue>
                                    </div>
                                </template>

                                <template v-if="(currentModule.requestArgs && currentModule.requestArgs.length>0)">
                                    <p class="api-details-title">全局请求参数</p>
                                    <div class="div-table">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-2">参数名称</li>
                                            <li class="col-sm-1">是否必须</li>
                                            <li class="col-sm-1">类型</li>
                                            <li class="col-sm-6">描述</li>
                                            <li class="col-sm-2">默认值</li>
                                        </ul>
                                        <request-args-vue
                                                v-bind:request-args.sync="currentModule.requestArgs"
                                                v-bind:editing="editing"></request-args-vue>
                                    </div>
                                </template>

                                <template v-if=" (currentApi.requestArgs  && currentApi.requestArgs.length>0)">
                                    <p class="api-details-title">请求参数</p>
                                    <div class="div-table">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-2">参数名称</li>
                                            <li class="col-sm-1">是否必须</li>
                                            <li class="col-sm-1">类型</li>
                                            <li class="col-sm-6">描述</li>
                                            <li class="col-sm-2">默认值</li>
                                        </ul>
                                        <request-args-vue
                                                v-bind:request-args.sync="currentApi.requestArgs"
                                                v-bind:editing="editing"></request-args-vue>
                                    </div>
                                </template>
                                <template v-if="currentApi.responseArgs && currentApi.responseArgs.length>0">
                                    <p class="api-details-title">响应数据</p>
                                    <div class="div-table">
                                        <ul class="div-table-header div-table-line cb">
                                            <li class="col-sm-2">参数名称</li>
                                            <li class="col-sm-1">是否必须</li>
                                            <li class="col-sm-2">数据类型</li>
                                            <li class="col-sm-7">描述</li>
                                        </ul>
                                        <response-args-vue
                                                v-bind:response-args.sync="currentApi.responseArgs"
                                                v-bind:editing="editing"></response-args-vue>
                                    </div>
                                </template>

                                <template v-if="currentApi.example">
                                    <p class="api-details-title">例子</p>
                                    <div class="api-details-desc api-edit-box">
                                        <pre class="content">{{currentApi.example}}</pre>
                                    </div>
                                </template>
                                <p class="api-details-title">演示</p>
                                <template v-if="!currentApi.protocol || currentApi.protocol == 'HTTP'">
                                    <div class="form">
                                        <div class="item">
                                            <div class="col-sm-2 label second">请求地址</div>
                                            <div class="col-sm-8">
                                                <input type="hidden" value="{{requestURL}}">
                                                <input type="text" class="text" id="requestURL">
                                            </div>
                                            <div class="col-sm-2" style="text-align: right">
                                                <div class="xyj-dropdown">
                                                    <span class="api-view-env xyj-dropdown-toggle">{{currentEnv.name}}  <i class="iconfont icon-angeldownblock"></i></span>
                                                    <ul class="xyj-dropdown-list api-view-env-items">
                                                        <li v-for="item in envs" v-bind:class="{'active':item.t==currentEnv.t}"
                                                            v-on:click="currentEnv=item"
                                                            v-on:mouseover="envOver(item,$event)">{{item.name}}</li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <template v-if="(currentModule.requestHeaders && currentModule.requestHeaders.length>0) || (currentApi.requestHeaders && currentApi.requestHeaders.length>0)">
                                        <form class="api-test form" id="header-form">
                                            <p class="api-details-title second">请求头</p>
                                            <div class="item" v-for="item in currentModule.requestHeaders">
                                                <div class="col-sm-2 label">{{item.name}}</div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="{{item.name}}"
                                                           value="{{item.testValue || item.defaultValue}}"
                                                           placeholder="{{item.description}}" class="text">
                                                </div>
                                            </div>
                                            <div class="item" v-for="item in currentApi.requestHeaders">
                                                <div class="col-sm-2 label">{{item.name}}</div>
                                                <div class="col-sm-8">
                                                    <input type="text" name="{{item.name}}"
                                                           value="{{item.testValue || item.defaultValue}}"
                                                           placeholder="{{item.description}}" class="text">
                                                </div>
                                            </div>
                                        </form>
                                    </template>

                                    <div class="form">

                                    <template v-if="currentApi.urlArgs && currentApi.urlArgs.length>0">
                                        <p class="api-details-title second">地址参数</p>
                                        <div class="item" v-for="item in currentApi.urlArgs">
                                            <div class="col-sm-2 label">{{item.name}}</div>
                                            <div class="col-sm-8">
                                                <input data-type="text" v-model="item.value" type="text"
                                                       name="{{item}}" placeholder="替换URL上的参数"
                                                       class="text">
                                            </div>
                                        </div>
                                    </template>
                                    </div>
                                    <form class="form" id="args-form" v-on:submit.prevent>
                                        <template v-if="(currentModule.requestArgs && currentModule.requestArgs.length>0) || (currentApi.requestArgs && currentApi.requestArgs.length>0)">
                                            <div class="cb">
                                                <div>
                                                    <template v-if="currentApi.dataType=='XML' || currentApi.dataType =='JSON'">
                                                        <div class="item">
                                                            <div class="col-sm-2 label">Body</div>
                                                            <div class="col-sm-8">
                                                                <pre id="ace-editor-box"></pre>
                                                            </div>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <p class="api-details-title second">请求参数</p>
                                                        <div class="item"  v-for="item in currentModule.requestArgs">
                                                            <div class="col-sm-2 label">{{item.name}}</div>
                                                            <div class="col-sm-8" v-bind:class="{'full-text':item.type=='file'}">
                                                                <input data-type="{{item.type}}"
                                                                       type="{{item.type=='file'?'file':'text'}}"
                                                                       name="{{item.name}}"
                                                                       class="api-request-args-item"
                                                                       value="{{item.testValue || item.defaultValue}}"
                                                                       placeholder="{{item.description}}"
                                                                       v-bind:class="{'text':item.type!='file'}">
                                                            </div>
                                                        </div>
                                                        <div class="item"  v-for="item in currentApi.requestArgs">
                                                            <div class="col-sm-2 label">{{item.name}}</div>
                                                            <div class="col-sm-8" v-bind:class="{'full-text':item.type=='file'}">
                                                                <input data-type="{{item.type}}"
                                                                       type="{{item.type=='file'?'file':'text'}}"
                                                                       name="{{item.name}}"
                                                                       class="api-request-args-item"
                                                                       value="{{item.testValue || item.defaultValue}}"
                                                                       placeholder="{{item.description}}"
                                                                       v-bind:class="{'text':item.type!='file'}">
                                                            </div>
                                                        </div>
                                                    </template>
                                                </div>
                                            </div>
                                        </template>

                                        <template v-if="currentApi.dataType=='RAW'">
                                            <p class="api-details-title second">请求数据</p>
                                            <div class="item">
                                                <div class="col-sm-2 label">body</div>
                                                <div class="col-sm-8">
                                                    <textarea class="text" id="rawBody"></textarea>
                                                </div>
                                            </div>
                                        </template>
                                        <template v-if="currentApi.dataType=='BINARY'">
                                            <p class="api-details-title second">请求数据</p>
                                            <div class="item">
                                                <div class="col-sm-2 label">BINARY</div>
                                                <div class="col-sm-8">
                                                    <input type="file" class="full-text" id="binaryBody">
                                                </div>
                                            </div>
                                        </template>



                                        <div class="form">
                                            <div class="item">
                                                <div class="col-sm-2 label"></div>
                                                <div class="col-sm-8">
                                                    <input type="button" id="api-submit" v-on:click.stop="apiSubmit"
                                                           class="btn btn-primary" value="{{status.apiLoading?'加载中':'发送'}}">
                                                    <input type="button" v-on:click.stop="apiMock" v-show="currentApi.responseArgs && currentApi.responseArgs.length>0"
                                                           class="btn btn-orange" value="mock">

                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    <!--<p class="api-details-title">结果数据</p>-->
                                    <div class="api-result-tabs cb" v-show="currentApi.result">
                                        <a class="tab fl active" v-on:click="flag.resultActive='content'" v-bind:class="{'active':(flag.resultActive=='content')}">Body</a>
                                        <a class="tab fl" v-on:click="flag.resultActive='headers'" v-bind:class="{'active':(flag.resultActive=='headers')}">Headers</a>
                                        <a class="tab fr">Time: {{currentApi.resultRunTime}} ms</a>
                                        <a class="tab fr">StatusCode: {{currentApi.resultStatusCode}}</a>
                                    </div>
                                    <div v-show="currentApi.result" class="api-result-box">
                                        <i v-show="!!currentApi.result && (flag.resultActive=='content')" id="api-result-copy" class="iconfont icon-copy"></i>
                                        <i v-show="!!currentApi.result && currentApi.contentType=='HTML' && (flag.resultActive=='content')" class="iconfont icon-openwindow" v-on:click="openNewWindow"></i>
                                        <i v-show="!!currentApi.result && (flag.resultActive=='headers')" id="api-result-header-copy" class="iconfont icon-copy"></i>
                                        <div id="api-result">
                                            <pre v-show="flag.resultActive=='content'" id="api-result-content">{{{currentApi.result}}}</pre>
                                            <div v-show="flag.resultActive=='headers'" id="api-result-headers">
                                                <div class="api-result-headers-list" v-show="currentApi.resultHeaders">
                                                    {{{currentApi.resultHeaders | html}}}
                                                </div>
                                                <div v-else class="api-result-headers-list">
                                                    <div v-if="extVer>=1.4">
                                                        No header for you
                                                    </div>
                                                    <div v-else>
                                                        请下载或升级浏览器插件。
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ta-c api-plugin-tip" v-if="!extVer">
                                        <i class="iconfont icon-chrome"></i><br/>
                                        <p>由于浏览器有跨域限制，如果您的服务器不支持CORS协议，需要安装我们开发的Chrome插件“小幺鸡”</p>
                                        <p>安装的时候请注意勾选，安装后请刷新页面。</p>
                                        <p>
                                            <a href="https://chrome.google.com/webstore/detail/%E5%B0%8F%E5%B9%BA%E9%B8%A1/omohfhadnbkakganodaofplinheljnbd" target="_blank" class="btn btn-default">Chrome应用商店</a>
                                            <a href="/extension/xiaoyaoji.crx" target="_blank" class="btn btn-default">本地下载</a>
                                            <a href="http://jingyan.baidu.com/article/e5c39bf56286ae39d6603374.html" target="_blank" class="btn btn-default">本地下载安装教程</a>
                                        </p>
                                    </div>
                                    <div v-else>
                                        <div class="ta-c api-plugin-tip" v-if="extVer < 1.3">
                                            <i class="iconfont icon-chrome"></i><br/>
                                            <p>您安装的『小幺鸡』插件版本有更新,为了避免使用出现bug,请下载升级</p>
                                            <p>安装的时候请注意勾选，安装后请刷新页面。</p>
                                            <p>
                                                <a href="https://chrome.google.com/webstore/detail/%E5%B0%8F%E5%B9%BA%E9%B8%A1/omohfhadnbkakganodaofplinheljnbd" target="_blank" class="btn btn-default">Chrome应用商店</a>
                                                <a href="/extension/xiaoyaoji.crx" target="_blank" class="btn btn-default">本地下载</a>
                                                <a href="http://jingyan.baidu.com/article/e5c39bf56286ae39d6603374.html" target="_blank" class="btn btn-default">本地下载安装教程</a>
                                            </p>
                                        </div>
                                    </div>
                                </template>
                                <template v-if="currentApi.protocol == 'WEBSOCKET'">
                                    <div class="form">
                                        <div class="item">
                                            <div class="col-sm-2 label">日志</div>
                                            <div class="col-sm-10"><textarea class="text" v-model="ws.log"
                                                                             rows="10"></textarea></div>
                                        </div>
                                        <div class="item">
                                            <div class="col-sm-2 label">地址</div>
                                            <div class="col-sm-10">
                                                <input type="text" class="text" id="websocketRequestURL"
                                                                          value="{{requestURL}}"
                                                                          v-model="ws.url"></div>
                                        </div>

                                        <div class="item" v-if="ws.connected">
                                            <div class="col-sm-2 label">发送消息</div>
                                            <div class="col-sm-10"><input type="text" class="text" v-model="ws.message">
                                            </div>
                                        </div>

                                        <div class="item">
                                            <div class="col-sm-2">&nbsp;</div>
                                            <div class="col-sm-10">
                                                <input type="button" v-if="!ws.connected" v-on:click="wsConnect"
                                                       class="btn btn-primary" value="连接">
                                                <template v-else>
                                                    <input type="button" class="btn btn-primary"
                                                           v-on:click="wsSendMessage" value="发送消息">
                                                    <input type="button" class="btn btn-danger"
                                                           v-on:click="wsDisconnect" value="断开连接">
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="ta-c api-error-tip" v-cloak v-else>
                        <i class="iconfont icon-api" style="font-size: 120px"></i>
                        <p style="font-size: 24px">该模块下接口列表为空</p>
                        <p style="font-size: 12px">编辑模式可管理接口</p>
                    </div>
                </div>

            </template>
            <template v-if="error.projectNotExists">
                <div class="ta-c api-error-tip">
                    <i class="iconfont icon-cloud"></i>
                    <p style="font-size: 24px">项目不可见或不存在</p>
                </div>
            </template>
        </div>
        <!-- view end -->

        <!-- environment start -->
        <div class="modal env-modal" v-cloak v-if="status.envModal">
            <div class="modal-header">
                <i class="iconfont icon-close modal-close" v-on:click="status.envModal=false"></i>
            </div>
            <div class="modal-content">
                <div class="modal-layout1 form" style="width: 500px">
                    <p class="title" style="margin-bottom: 20px">添加新环境</p>
                    <div class="hint">
                        环境变量运行在URL中,你可以配置多个(线上、灰度、开发)环境变量。在URL中使用方式{{flag.varname}},例：<br/>
                        线上环境：prefix => http://www.xiaoyaoji.com.cn<br/>
                        则<br/>
                        请求URL：{{flag.prefix}}/say => http://www.xiaoyaoji.com.cn/say
                    </div>
                    <p class="title"></p>
                    <div class="item">
                        <div class="col-sm-12">
                            <input type="text" class="text" v-model="flag.tempEnv.name" placeholder="请输入环境名称">
                        </div>
                    </div>
                    <div class="item" v-for="(index,item) in flag.tempEnv.vars">
                        <div class="col-sm-5"><input type="text" v-model=item.name class="text" v-on:focus="envNewLine(index)" placeholder="变量名称" value="{{item.name}}"></div>
                        <div class="col-sm-6">
                            <input type="text" class="text" v-model="item.value" placeholder="变量值" value="{{item.value}}">
                        </div>
                        <div class="col-sm-1 full-text">
                            <i class="iconfont icon-close" v-on:click="flag.tempEnv.vars.$remove(item)"></i>
                        </div>
                    </div>

                    <div class="ta-c actions">
                        <button class="btn btn-default-box middle" tabindex="3"
                                v-on:click="status.envModal=false">
                            取消
                        </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-primary middle" v-on:click="envSave" tabindex="2">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- environment end -->
        </div>
        <div v-else>
            <div class="ta-c api-error-tip">
                <i class="iconfont icon-cloud"></i>
                <p style="font-size: 24px">模块列表为空,请先创建模块</p>
            </div>
        </div>

        <!-- modal list start -->
        <div class="modal" v-cloak v-if="status.folderModal">
            <div class="modal-header">
                <i class="iconfont icon-close modal-close" v-on:click="status.folderModal=false"></i>
            </div>
            <div class="modal-content">
                <div class="modal-layout1 form">
                    <validator name="ff">
                        <p class="title">{{!folderName?'创建':'编辑'}}分类</p>
                        <input type="text" class="k1 text" id="folderName" value="{{folderName}}" maxlength="20"
                               initial="off"
                               v-model="folderName"
                               v-validate:folder-name="{maxlength:20}"
                               v-bind:autofocus="status.folderModal"
                               tabindex="1" placeholder="请输入文件夹名称">
                        <div class="tip" v-if="$ff.folderName.invalid">{{$ff.errors[0].message}}</div>
                    </validator>
                    <div class="ta-c actions">
                        <button class="btn btn-default-box middle" tabindex="3"
                                v-on:click="status.folderModal=false">取消
                        </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-primary middle" v-on:click="folderSave" tabindex="2">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" v-cloak v-if="status.moduleModal">
            <div class="modal-header">
                <i class="iconfont icon-close modal-close" v-on:click="status.moduleModal=false"></i>
            </div>
            <div class="modal-content">
                <div class="modal-layout1 form">
                    <validator name="mf">
                        <p class="title">{{!moduleName?'创建':'编辑'}}模块</p>
                        <input type="text" maxlength="20" id="moduleName" class="k1 text" v-model="moduleName"
                               value="{{moduleName}}"
                               initial="off"
                               v-validate:module-name="{maxlength:20}"
                               v-bind:autofocus="status.folderModal"
                               tabindex="1" placeholder="请输入模块名称">
                        <div class="tip" v-if="$mf.moduleName.invalid">{{$mf.errors[0].message}}</div>
                        <div class="ta-c actions">
                            <button class="btn btn-default-box middle" tabindex="3"
                                    v-on:click="status.moduleModal=false">
                                取消
                            </button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-primary middle" v-on:click="moduleSave" tabindex="2">确定</button>
                        </div>
                    </validator>
                </div>
            </div>
        </div>
        <div class="modal" v-cloak v-if="status.importModal">
            <div class="modal-header">
                <i class="iconfont icon-close modal-close" v-on:click="status.importModal=false"></i>
            </div>
            <div class="modal-content">
                <div class="modal-layout1 form" style="width: 500px">
                    <validator name="if">
                        <p class="title">导入JSON</p>
                        <textarea rows="15" class="k1 text" v-model="importValue" initial="off"
                                  v-bind:autofocus="status.importModal"
                                  tabindex="1" placeholder="请粘贴导入的数据"></textarea>
                        <div class="ta-c actions">
                            <button class="btn btn-default-box middle" tabindex="3"
                                    v-on:click="status.importModal=false">
                                取消
                            </button>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-primary middle" v-on:click="importOk" tabindex="2">确定</button>
                        </div>
                    </validator>
                </div>
            </div>
        </div>
        <div class="modal" v-cloak v-if="status.moveCopyModal">
            <div class="modal-header">
                <i class="iconfont icon-close modal-close" v-on:click="status.moveCopyModal=false"></i>
            </div>
            <div class="modal-content">
                <div class="modal-layout1 form" style="width: 500px">
                    <p class="title">{{flag.move?'移动':'复制'}}{{flag.moveCopyName}}</p>
                    <div class="item">
                        <div class="label col-sm-2">选择模块</div>
                        <div class="col-sm-10 full-text">
                            <select class="text" v-model="flag.moveCopySelectModuleId">
                                <option v-for="item in modules" v-bind:value="item.id">{{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="item" v-for="m in modules" v-if="flag.moveCopySelectModuleId==m.id && flag.moveCopyName=='接口'">
                        <div class="label col-sm-2">选择分类</div>
                        <div class="col-sm-10 full-text">
                            <select class="text" v-model="flag.moveCopySelectFolderId">
                                <option v-for="item in m.folders" v-bind:value="item.id">{{item.name}}</option>
                            </select>
                        </div>
                    </div>

                    <div class="ta-c actions">
                        <button class="btn btn-default-box middle" tabindex="3"
                                v-on:click="status.moveCopyModal=false">
                            取消
                        </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button class="btn btn-primary middle" v-on:click="copyMoveOk" tabindex="2">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal" v-cloak v-if="status.shareModal">
            <div class="modal-header">
                <i class="iconfont icon-close modal-close" v-on:click="status.shareModal=false"></i>
            </div>
            <div class="modal-content api-share">
                <div class="modal-layout-box form" v-show="!status.shareCreateModal">
                    <p class="title">分享列表</p>
                    <ul>
                        <li class="api-share-item" v-for="item in shares">
                            <div class="cb">
                                <a class="fl api-share-title" target="_blank" v-link="'/share/'+item.id">[{{item.username}}] {{item.name}}</a>
                                <div class="fr">
                                    <i class="iconfont icon-lock" v-on:click="shareItemClockClick"></i>
                                    <i class="iconfont icon-close" v-on:click="deleteShare(item)"></i>
                                </div>
                                <input type="text" placeholder="空则表示不用密码" v-on:blur="shareItemPasswordBlur(item,$event)" data-value="{{item.password}}" class="text api-share-pwd-box" value="{{item.password}}">
                            </div>
                            <div class="cb">
                                <span v-if="item.shareAll == 'YES'">所有模块</span>
                                <span v-else>
                                    <span v-for="m in item.shareModules">{{m.name}},</span>
                                </span>
                                <span class="fr">{{item.createTime}}</span>
                            </div>
                        </li>
                    </ul>
                    <br/>
                    <button class="btn btn-primary middle" v-on:click="status.shareCreateModal=true">创建新分享</button>
                </div>
                <div class="modal-layout-box form " v-show="status.shareCreateModal">
                    <form onsubmit="return false;" id="share-form" >
                        <p class="title">创建新的分享</p>
                        <div class="item">
                            <div class="col-sm-2 label">整个项目</div>
                            <div class="col-sm-10 full-text">
                                <input type="checkbox" v-model="flag.shareAll">
                            </div>
                        </div>
                        <div class="item" v-if="!flag.shareAll">
                            <div class="col-sm-2 label">勾选模块</div>
                            <div class="col-sm-10 full-text">
                                <label v-for="item in modules" class="api-share-cm-label">
                                    <input type="checkbox" name="moduleId" value="{{item.id}}"> {{item.name}}</label>
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-sm-2 label">名称</div>
                            <div class="col-sm-10">
                                <input type="text" name="name" maxlength="20" class="text" placeholder="请输入分享的名称">
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-sm-2 label">阅读密码</div>
                            <div class="col-sm-10">
                                <input type="text" name="password" maxlength="10" class="text" placeholder="请输入阅读密码">
                            </div>
                        </div>
                        <div class="item">
                            <div class="col-sm-2 label"></div>
                            <div class="col-sm-10">
                                <button class="btn btn-default-box middle" tabindex="3"
                                        v-on:click="status.shareCreateModal=false">返回
                                </button>
                                <button class="btn btn-primary middle" v-on:click="shareCreate" tabindex="2">确定</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!-- modal list end -->
    </template>

    <!-- loading start -->
    <template v-if="status.loading">
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
    </template>
    <!-- loading end -->
</template>


<script>
    import js from '../app/api';
    export default js;
</script>